<template>
	<div class="column-tree">
		<el-tree :data="tableData" :props="defaultProps" node-key="id" :default-expanded-keys="expandedKeys" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse"
			style="padding: 10px 5px">
			<span class="custom-tree-node" slot-scope="{ node, data }">
				<span :class="['sheng', 'node-names', { active: data.id == curColumn.id }]" :title="node.data.name" @click="handleClick(data)">
					<b :class="[nameIcon(data), data.classType == 1 ? 'color-theme' : '']"></b>
					{{ node.data.name }}
				</span>
				<span width="200" class="btns">
					<el-button type="text" title="添加源" class="el-icon-plus" @click.stop="() => handleAdd(data)" v-if="data.classType == 1 && userType == 1">
						添加源
					</el-button>
					<el-button type="text" title="编辑" class="el-icon-edit" v-if="data.classType != 1 && userType == 1" @click.stop="() => handleEdit(data)"></el-button>
					<el-button type="text" class="el-icon-minus" title="删除" v-if="data.classType != 1 && userType == 1" @click.stop="() => handleDelete(data)"></el-button>
				</span>
			</span>
		</el-tree>
	</div>
</template>
<script>
	import columnIcon from '../public/columnIcon'
	import { mapGetters } from 'vuex'
	export default {
		mixins: [columnIcon],
		data() {
			return {
				expandedKeys: [],
				userType: '',
				listQuery: {
					// pid: 103,
				},
				tableData: [],
				defaultProps: {
					children: 'childList',
					label: 'name',
				},
			}
		},
		computed: {
			...mapGetters(['curColumn']),
		},
		mounted() {
			this.userType = this.$store.getters.userType
			this.getList()
			this.$bus.$on('getWebColumnList', (v) => {
				if (v) {
					Object.assign(this.listQuery, v)
				}
				this.getList()
			})
		},
		beforeDestroy() {
			this.$bus.$off('getWebColumnList')
		},
		methods: {
			async getList() {
				let res = await this.$store.dispatch('queryWebColumn', this.listQuery)
				this.tableData = res.data
				this.tableData = this.tableData.filter((v) => v.id == 103)[0].childList
				this.$store.commit('SET_COLUMNDATA', this.tableData)
			},
			handleClick(row) {
				if (row.classType == 41) {
					this.$store.commit('changeJournalFlag', true)
				}
				this.$store.commit('SET_COLUMN', row)
			},
			handleEdit(row) {
				this.$bus.$emit('columnSourceAdd', row, 'edit')
			},
			handleAdd(row) {
				this.$bus.$emit('columnSourceAdd', row, 'add')
			},
			handleDelete(row) {
				this.$confirm('确定要删除吗?', '提示', {
						confirmButtonText: '删除',
						cancelButtonText: '取消',
						type: 'warning',
					})
					.then(() => {
						this.delete(row)
					})
					.catch(() => {})
			},
			async delete(row) {
				await this.$store.dispatch('deleteWebColumn', row)
				this.getList()
			},
			//节点展开
			handleNodeExpand(row) {
				this.expandedKeys.push(row.id)
			},
			//节点收起
			handleNodeCollapse(row) {
				let idx = this.expandedKeys.indexOf(row.id)
				this.expandedKeys.splice(idx, 1)
			},
		},
	}
</script>
<style scoped lang="scss">
	.column-tree {
		position: absolute;
		top: 30px;
		left: 0;
		right: 0;
		bottom: 0;
		margin-top: 10px;
		padding: 10px;
		min-height: 600px;
		background: #f5f7fa;
		.custom-tree-node {
			width: 310px;
			border-bottom: 1px dashed #eee;
			.node-names {
				float: left;
				width: 200px;
				line-height: 40px;
				&.active {
					color: $mainColor;
					font-weight: bold;
				}
			}
			.btns {
				float: right;
			}
		}
	}
</style>
<style scoped>
	.column-tree>>>.el-tree-node__content {
		height: auto;
	}
	.column-tree>>>.el-tree-node__children .el-tree-node__content {
		padding-right: 34px;
	}
</style>